<template>
  <div ref="basicProportionChart" style="width: 100%; height: 100%"></div>
</template>
<script>
let chart = null
const calculateProportion = (value, total) => {
  return ((value / total) * 100).toFixed(0)
}
export default {
  props: {
    data: Object
  },
  methods: {
    initChart() {
      if (null != chart && undefined != chart) {
        chart.dispose()
      }
      chart = this.$echarts.init(this.$refs.basicProportionChart)
      this.setOptions()
    },
    setOptions() {
      let list = [
        {
          name: '现有确诊',
          value: calculateProportion(this.data.econnum, this.data.contotal)
        },
        {
          name: '累计治愈',
          value: calculateProportion(this.data.curetotal, this.data.contotal)
        },
        {
          name: '累计死亡',
          value: calculateProportion(this.data.deathtotal, this.data.contotal)
        }
      ]
      let titleList = [],
        seriesList = []
      list.forEach((item, index) => {
        titleList.push({
          text: item.name,
          top: '75%',
          left: index * 30 + 11 + '%',
          fontWeight: 'normal',
          textStyle: {
            color: 'rgba(36, 173, 254, 1)',
            fontSize: 16
          }
        })
        seriesList.push({
          name: item.name,
          type: 'pie',
          clockwise: true,
          radius: ['50%', '66%'],
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          },
          center: [index * 30 + 20 + '%', '35%'],
          data: [
            {
              value: item.value,
              name: item.name,
              label: {
                formatter: function (params) {
                  return params.value + '%'
                },
                position: 'center',
                show: true,
                fontSize: '14',
                fontWeight: 'bold',
                color: '#FFF'
              },
              itemStyle: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: '#D32E58' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#F99266' // 100% 处的颜色
                    }
                  ]
                },
                label: {
                  // show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            {
              value: 100 - item.value,
              label: {
                show: false
              }
            }
          ]
        })
      })
      let option = {
        title: titleList,
        color: ['rgba(7, 158, 254, .9)'],
        series: seriesList
      }
      chart.setOption(option)
    }
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        if (oldValue != newValue) {
          this.setOptions()
        }
      },
      deep: true
    }
  }
}
</script>